<template>
    <div :class="c1Class">这是一个div</div>
    <!-- 绑定对象,当flag的值为true时,使用ok的样式 -->
    <div :class="{ ok: flag }">第二个div</div>
    <div :class="{ ok: flag, error: !flag }">第三个div</div>
    <!-- 必须是6-12个字符 -->
    <input type="text" :class="{ ok: flag, error: !flag }" @input="check($event.target.value)">
    <!-- 支持多个样式,使用数组表示 -->
    <div :class="[c1Class, okClass]">第四个div</div>
    <p :style="{ color: color, 'font-size': fontSize}">第一个段落</p>
     <!-- 当属性值与属性名相同时,可以省略,驼峰命名法的属性值也可以识别 -->
    <p :style="{ color, fontSize}">第二个段落</p>
</template>
<script setup>
import { ref } from 'vue';

const c1Class = ref("c1")
const okClass = ref("ok")

const flag = ref(false)

function check(args) {
    flag.value = args.length >= 6 && args.length <= 12;
}

const color = ref('blue')
const fontSize = ref("32px")
</script>
<style>
.c1 {
    font-size: 32px;
}

.ok {
    color: green;
}

.error {
    color: red;
}
</style>